<mat-toolbar class="flex flex-row white-header">
  <!-- 左侧区域 -->
  <button 
    mat-icon-button 
    class="sidebar-toggle"
    (click)="toggleSidebar()"
    matTooltip="切换侧边栏">
    <mat-icon>menu</mat-icon>
  </button>

  <cne-breadcrumb
    class="mat-toolbar-tools flex-1">
  </cne-breadcrumb>

  <button *ngIf="fullscreenEnabled"
          class="lt-md:!hidden"
          mat-icon-button (click)="toggleFullscreen()">
    <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
  </button>

    <!-- 通知 -->
    <button 
      mat-icon-button 
      class="notification-btn"
      [matMenuTriggerFor]="notificationMenu"
      matTooltip="通知">
      <mat-icon 
        matBadge="{{ getNotificationCount() }}" 
        matBadgeColor="warn"
        matBadgeSize="small"
        aria-hidden="false">
        notifications
      </mat-icon>
    </button>
    
    
    
    <!-- 语言切换 -->
    <button 
      mat-icon-button 
      class="language-btn"
      [matMenuTriggerFor]="languageMenu"
      matTooltip="语言切换">
      <mat-icon>language</mat-icon>
    </button>
    
    <cne-user-menu></cne-user-menu>
</mat-toolbar>

<!-- 通知菜单 -->
<mat-menu #notificationMenu="matMenu" class="notification-menu">
  <div class="menu-header">
    <h3>通知</h3>
    <button mat-button color="primary">全部标记为已读</button>
  </div>
  <mat-divider></mat-divider>
  <div class="notification-list">
    <div class="notification-item">
      <mat-icon class="notification-icon warn">report</mat-icon>
      <div class="notification-content">
        <div class="notification-title">Warning: RAM shortage</div>
        <div class="notification-message">RAM usage is at 84%.</div>
      </div>
      <div class="notification-meta">
        <div class="notification-time">45 分</div>
        <mat-icon class="notification-status">check_circle</mat-icon>
      </div>
    </div>
    <div class="notification-item">
      <mat-icon class="notification-icon warn">report</mat-icon>
      <div class="notification-content">
        <div class="notification-title">Warning: CPU shortage</div>
        <div class="notification-message">CPU usage is at 86%.</div>
      </div>
      <div class="notification-meta">
        <div class="notification-time">1 时</div>
        <mat-icon class="notification-status">check_circle</mat-icon>
      </div>
    </div>
  </div>
  <mat-divider></mat-divider>
  <div class="menu-footer">
    <button mat-button color="primary">查看全部通知</button>
  </div>
</mat-menu>

<!-- 语言菜单 -->
<mat-menu #languageMenu="matMenu">
  <button mat-menu-item>
    <mat-icon>flag</mat-icon>
    <span>中文</span>
  </button>
  <button mat-menu-item>
    <mat-icon>flag</mat-icon>
    <span>English</span>
  </button>
</mat-menu>